@media only screen and (-webkit-min-device-pixel-ratio:2) {
	.logo h1 {
		background: url(https://via.placeholder.com/516x78.png?text=Logo) no-repeat left center;
		background-size: 258px 39px
	}

	.socialicons .rss {
		background: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/rss@2x.png)
	}

	// articlesmedia="screen" .socialicons .rss {
	// 	background: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/rss.png);
	// 	opacity: .7
	// }

	.socialicons .dribbble,.socialicons .email,.socialicons .facebook,.socialicons .fivehundredpx,.socialicons .googleplus,.socialicons .rss,.socialicons .twitter {
		-webkit-background-size: auto 30px;
		-moz-background-size: auto 30px;
		background-size: auto 30px
	}

	.nav .current {
		background-image: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/navarrow@2x.png);
		-webkit-background-size: auto 8px;
		-moz-background-size: auto 8px;
		background-size: auto 8px
	}

	ul.membership li {
		background: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/bullet-membership@2x.png) no-repeat left center;
		-webkit-background-size: auto 17px;
		-moz-background-size: auto 17px;
		background-size: auto 17px
	}

	.article-body ul li {
		list-style-type: none;
		background-image: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/bullet@2x.png);
		background-repeat: no-repeat;
		background-position: left .4em;
		padding: 0 0 0 1.2em;
		-webkit-background-size: auto 8px;
		-moz-background-size: auto 8px;
		background-size: auto 8px
	}
}

@media handheld,only screen and (max-width:400px) {
	.logo h1 {
		background: url(https://via.placeholder.com/516x78.png?text=Logo) no-repeat left center;
		background-size: 198px 30px
	}
}

@media handheld,only screen and (max-width:1260px) {
	.runoob-block {
		display: none;
	}

	#footer .copyright {
		background: #fff;
	}
}

@media handheld,only screen and (max-width:1024px) {
	.right-column {
		display: none
	}

	.pc-nav {
		display: none
	}

	.mobile-nav {
		display: inline-block;
		width: 100%
	}

	.middle-column-home {
		width: 76%;
		margin-right: 0
	}

	.middle-column {
		width: 82%
	}

	.big-middle-column {
		width: 100%
	}

	.swatch {
		display: none
	}

	.home_feature_thumbnail {
		width: 43%;
		float: right;
		margin: 0 0 20px 20px
	}

	.sub-navigation-articles {
		display: none
	}

	#footer .runoob-block {
		display: none
	}

	#footer .copyright {
		background: #fff;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-top: 20px;
		-moz-box-shadow: 0 -1px 1px #ececec;
		box-shadow: 0 -1px 1px #ececec
	}

	.codelist a.item-top h4 {
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.codelist a.item-top {
		width: 40%
	}
}

@media handheld,only screen and (max-width:768px) {
	body {
		-webkit-text-size-adjust: none;
		-webkit-appearance: none
	}

	.right-list button {
		display: block
	}

	input[type=radio] {
		-webkit-appearance: "radio"
	}

	.shortcuts .shortcut {
		width: 22.4%
	}

	.container,.row,body {
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0
	}

	.col,.eightcol,.elevencol,.fifteencol,.fivecol,.fourcol,.fourteencol,.ninecol,.onecol,.sevencol,.sixcol,.sixteencol,.tencol,.thirteencol,.threecol,.twelvecol,.twocol {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0
	}

	.ad-336280 {
		display: none
	}

	.archive-options {
		display: none
	}

	.left-column {
		display: none
	}

	.right-column {
		display: none
	}

	.middle-column,.middle-column-home {
        width: 100%;
	}

	.re-box {
		margin: 0;
		padding: 10px
	}

	.small-ads {
		margin: 0;
		padding: 10px
	}

	.small-ads .bsap a {
		border: 4px solid #ededed
	}

	.small-ads .bsap .odd {
		margin: 0 8px 8px 0
	}

	.small-ads .bsap .even {
		margin: 0 0 8px 0
	}

	.small-ads .bsap a,.small-ads .bsap a img {
		width: 88px
	}

	.search {
		width: 30%;
		float: right
	}

	.logo {
		width: 40%;
		float: left
	}

	.codelist a.item-top strong {
		text-align: left
	}

	.right-column {
		display: none
	}
}

@media handheld,only screen and (max-width:480px) {
	div.example_code {
		width: 96%
	}

	.shortcuts .shortcut {
		width: 45%
	}

	.ad-336280 {
		width: 100%;
		padding: 0
	}

	.search {
		width: 100%;
		float: none
	}

	.codelist-desktop {
		display: none
	}

	.codelist-mobile {
		display: block
	}

	.search-reveal {
		background-image: url(https://www.runoob.com/wp-content/themes/runoob/assets/img/search.png);
		background-size: 15px 15px;
		background-repeat: no-repeat;
		text-indent: -9999px;
		display: inline-block;
		width: 20px;
		margin: 0;
		float: right
	}

	.logo {
		width: 80%;
		float: left
	}

	.logo h1 {
		background-size: 198px 30px
	}

	.sub-navigation {
		display: none
	}

	.sub-navigation-mobile {
		display: block;
		width: 90%;
		margin: 0 auto
	}

	.nav-sub-mobile {
		font-size: 1.1em;
		font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
		padding: 0
	}

	.mobile-nav-hidden {
		display: none;
		padding: 10px 0 0 0;
		background: #fff;
		border-right: 1px solid #efefef;
		border-left: 1px solid #efefef
	}

	.nav-sub-mobile ul {
		list-style: none
	}

	.nav-sub-mobile li a {
		padding: 5px 0 5px 20px;
		display: block;
		text-decoration: none
	}

	.nav-sub-mobile li a:hover,.nav-sub-mobile li.current-cat a {
		background: #f1f1f1
	}

	.nav-sub-mobile li a {
		color: #333
	}

	.nav-sub-mobile li a:hover {
		color: #777
	}

	.archive-list-item img.wp-post-image {
		float: right!important;
		margin: 0 0 10px 20px
	}

	.nav-submit {
		display: none
	}

	.left-column {
		display: none
	}

	.right-column {
		display: none
	}

	.nav li,.nav-sub li {
		margin: 0 10px 0 0
	}

	.logo,.search {
		text-align: center
	}

	.row-search-mobile {
		margin: 0 0 10px 0
	}

	.search input {
		text-align: center
	}

	.search input {
		height: 30px
	}

	.search-desktop {
		display: none
	}

	.logo img {
		padding: 5px 0 0 0
	}

	.tab {
		margin: 0 auto
	}

	.archive-list-item img,.home_feature_thumbnail {
		width: 50%!important
	}

	.archive-gallery .archive-list-item img.gallery-image {
		display: inline-block;
		width: 100%!important;
		float: none
	}

	.archive-gallery .archive-list-item .design-information {
		width: 100%;
		float: none
	}

	.image-alternative {
		display: none
	}

	.image-layout-style .image-alternative {
		display: block
	}

	.middle-column-home {
        width: 100%!important;
	}

	.article-body .two-column {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		margin: 0 0 1em 0
	}

	.archive-list-item .post-intro {
		float: none;
		width: 100%
	}

	.article-heading {
		padding-top: 10px;
		padding-bottom: 5px;
		padding-left: 20px;
		padding-right: 20px
	}

	.article-body {
		padding-left: 20px;
		padding-right: 20px
	}

	.article-body h2,.article-heading h2,.comments-heading h2 {
		font-size: 1.7em
	}

	.article-body h3,.article-heading h3,.comments-body h3,.comments-heading h3 {
		font-size: 1.5em
	}

	.article-heading h3 {
		font-size: 1.2em
	}

	.article-body .quote,.article-body .quote-left,.article-body .quote-right {
		padding: 10px;
		font-size: 1.2em;
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0
	}

	.comments-heading h2 {
		float: none
	}

	.comments-heading h3 {
		float: none
	}

	.small-ads .bsap a,.small-ads .bsap a img {
		width: 125px!important;
		text-align: center
	}

	.image-layout-style .archive-list-item {
		width: 94%;
		padding: 3%
	}

	.archive-layout-toggle,.gallery-layout-toggle {
		border-radius: 3px;
		height: 25px;
		opacity: .8
	}

	.gallery-filter-color h3 {
		margin-top: 0
	}

	.archive-options .archive-search {
		display: none
	}

	.archive-options .archive-category select {
		height: 27px
	}

	.archive-options .archive-category {
		width: 60%;
		margin: 0
	}

	.article-intro .tutorialimage:nth-of-type(1) {
		float: none;
		width: 90%;
		margin: 0 0 20px 0
	}

	.design-description {
		width: 100%;
		margin: 0
	}

	.design-meta {
		width: 100%
	}

	.related-designs img {
		width: 100%;
		margin: 0 0 20px 0
	}

	.article-body ul.activity-dropdown li {
		text-align: left;
		border-bottom: 1px solid #efefef;
		padding: 10px 10px 10px 30px;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 17px auto
	}

	.article-body ul.activity-dropdown li span {
		color: grey;
		display: block;
		float: none;
		font-size: .8em
	}

	.article-body ul.activity-dropdown li img {
		width: 100%;
		display: block;
		margin: 20px 0 0 0
	}

	.content-ad-728 {
		display: none
	}

	.lower-ad-block {
		display: none
	}

	.membership-benefit {
		width: 100%;
		margin: 0;
		float: none;
		overflow: hidden;
		text-align: left;
		border-bottom: 1px solid #efefef;
		margin: 0 0 20px 0
	}

	.membership-benefit img {
		float: right;
		width: 25%
	}

	#ds-form label {
		width: 100%;
		margin: 0 0 5px 0
	}

	#ds-form .field {
		width: 95%;
		margin: 0 0 10px 0
	}

	#ds-form .input-text,#ds-form input[type=password],#ds-form input[type=text],#ds-form select,#ds-form textarea {
		width: 93%
	}

	.team-member {
		width: 100%;
		margin: 0
	}

	.team-member img {
		width: 30%;
		margin: 0 0 20px 20px;
		float: right
	}

	.team-member h3 {
		font-size: 1.2em
	}

	.codelist a.item-top .codeicon {
		display: none
	}

	.codelist a.item-top strong {
		display: none
	}

	.codelist a.item-top {
		width: 28%;
		height: 40px;
		color: #bbb;
		background-color: #f6f6f6;
		border-radius: 5px;
		padding: 0
	}

	.codelist a.item-top h4 {
		font-size: 14px;
		text-align: center
	}
}